{include file=comm/head.html}
{include file=comm/top.html}
<div class="section">
    <div class="container">
        <div class="ct2 clearfix">
            {include file=comm/left.html}
            <div class="ct2-mn">
                {include file=comm/position.html}
                <div class="yunu-showcase clearfix">
                    <div class="pc-slide">
                        <div class="view">
                            <div class="swiper-container swiper-container-horizontal">
                                <div class="swiper-wrapper">
                                    {pboot:if({content:ispics}==1)}
                                    {pboot:pics num=8 id={content:id}}
                                    <div class="swiper-slide">
                                        <div class="img-center">
                                            <img src="[pics:src]" rel="[pics:src]" class="jqzoom">
                                        </div>
                                    </div>
                                    {/pboot:pics}
                                    {else}
                                    <div class="swiper-slide">
                                        <div class="img-center">
                                            <img src="{content:ico}" rel="{content:ico}" class="jqzoom">
                                        </div>
                                    </div>
                                    {/pboot:if}
                                </div>
                            </div>
                        </div>
                        <div class="preview"> <a class="arrow-left" href="javascript:;"></a> <a class="arrow-right" href="javascript:;"></a>
                            <div class="swiper-container swiper-container-horizontal">
                                <div class="swiper-wrapper">
                                    {pboot:if({content:ispics}==1)}
                                    {pboot:pics num=8 id={content:id}}
                                    <div class="swiper-slide">
                                        <div class="img-center">
                                            <img src="[pics:src]">
                                        </div>
                                    </div>
                                    {/pboot:pics}
                                    {else}
                                    <div class="swiper-slide">
                                        <div class="img-center">
                                            <img src="{content:ico}">
                                        </div>
                                    </div>
                                    {/pboot:if}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="yunu-showcase-info">
                        <h1 class="protit">{content:title}</h1>
                        <p>{content:ext_desc}</p>
                        <div class="tel"><a href="javascript:;" class="btn">在线咨询</a></div>
                    </div>
                </div>
                <div class="content-body">
                    {content:content}
                </div>
                
                <ul class="content-exp">
                    <li><span>上一篇：</span>{content:precontent}</li>
                    <li><span>下一篇：</span>{content:nextcontent}</li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div id="message">
    <div class="messagebg"></div>
    <div class="m-content">
        <div class="m-message">
            <form id="myform1" method="post" onsubmit="return submsg(this);">
                <label> <span>留言标题：</span>
                    <input class="inp" type="text" name="titles" value="{content:title}" placeholder="请输入标题">
                    <em>*</em> </label>
                <label> <span>你的姓名：</span>
                    <input class="inp" type="text" name="name" placeholder="请输入你的姓名">
                    <em>*</em>
                </label>
                <label> <span>联系电话：</span>
                    <input class="inp" type="text" name="phone" placeholder="请输入你的电话">
                    <em>*</em> 
                </label>
                <label> <span>电子邮箱：</span>
                    <input class="inp" type="email" name="email" placeholder="请输入你的邮箱">
                </label>
                <label> <span>联系地址：</span>
                    <input class="inp" type="text" name="address" placeholder="请输入你的地址">
                </label>
                <label class="mes"> <span>留言内容：</span>
                    <textarea name="content"></textarea>
                </label>
                {pboot:if({pboot:msgcodestatus})}
                <label class="code">
                    <span>验证码：</span>
                    <input type="text" id="vdcode" name="checkcode">
                    <div class="pic"> <img class="img" id="vdimgck" align="absmiddle" onclick="this.src='{pboot:checkcode}?'+Math.round(Math.random()*10);" style="cursor: pointer;height:35px; width:100px;" alt="看不清？点击更换" src="{pboot:checkcode}" /></div>
                </label>
                {/pboot:if}
                <div class="btn-1">
                    <input class="focus" type="submit" value="提交">
                    <input type="reset" value="重置">
                </div>
            </form>
        </div>
    </div>
</div>
<script src="{pboot:sitetplpath}/skin/js/jquery.imagezoom.min.js"></script>
<script>
    if ($(window).width() > 767) {
    $('.jqzoom').imagezoom();
}

$('.preview .swiper-slide').eq(0).addClass('active-nav');

var viewSwiper = new Swiper('.view .swiper-container', {
    on: {
        slideChangeTransitionStart: function() {
            updateNavPosition()
        }
    }
});
$('.view .arrow-left,.preview .arrow-left').on('click', function(e) {
    e.preventDefault();
    if (viewSwiper.activeIndex === 0) {
        viewSwiper.slideTo(viewSwiper.slides.length - 1, 1000);
        return
    }
    viewSwiper.slidePrev();
});
$('.view .arrow-right,.preview .arrow-right').on('click', function(e) {
    e.preventDefault();
    if (viewSwiper.activeIndex === viewSwiper.slides.length - 1) {
        viewSwiper.slideTo(0, 1000);
        return
    }
    viewSwiper.slideNext();
});
var previewSwiper = new Swiper('.preview .swiper-container', {
    //visibilityFullFit: true,
    slidesPerView: 3,
    allowTouchMove: false,
    spaceBetween: 5,
    on: {
        tap: function() {
            viewSwiper.slideTo(previewSwiper.clickedIndex)
        }
    }
});
function updateNavPosition() {
    $('.preview .active-nav').removeClass('active-nav');
    var activeNav = $('.preview .swiper-slide').eq(viewSwiper.activeIndex).addClass('active-nav');
    if (!activeNav.hasClass('swiper-slide-visible')) {
        if (activeNav.index() > previewSwiper.activeIndex) {
            var thumbsPerNav = Math.floor(previewSwiper.width / activeNav.width()) - 1;
            previewSwiper.slideTo(activeNav.index() - thumbsPerNav);
        } else {
            previewSwiper.slideTo(activeNav.index());
        }
    }
}
</script>
<script type="text/javascript">
var inptext = $('.protit').html();
$('.btn').click(function() {
    $('#message').show();
    $('.protitle').val(inptext);
})
$('.messagebg').click(function() {
    $('#message').hide();
})

//ajax提交留言
function submsg(obj){
  var url='{pboot:msgaction}';
  var titles=$(obj).find('input[name="titles"]').val();
  var name=$(obj).find('input[name="name"]').val();
  var phone=$(obj).find('input[name="phone"]').val();
  var email=$(obj).find('input[name="email"]').val();
  var address=$(obj).find('input[name="address"]').val();
  var content=$(obj).find('textarea[name="content"]').val();
  var checkcode=$(obj).find('input[name="checkcode"]').val();
  $.ajax({
    type: 'POST',
    url: url,
    dataType: 'json',
    data: {
        titles: titles,
        name: name,
        phone: phone,
        email: email,
        address: address,
        content: content,
        checkcode: checkcode
    },
    success: function (response, status) {
      if(response.code){
         alert("提交成功，我们会尽快联系您！");
         $(obj)[0].reset(); 
         $('#message').hide();
      }else{
         alert(response.data);
      }
    },
    error:function(xhr,status,error){
      alert('返回数据异常！');
    }
  });
  return false;
}
</script>
{include file=comm/foot.html}